【vue3.2+cesium】加载三维天地图

#【vue3.2+cesium】加载三维天地图| 来源: 网络整理| 查看: 265

使用Vite+Vue3.2+Cesium。Vite需要Node.js版本14.18+及以上版本。Vite命令创建的工程会自动生成vite.config.js文件，来配置一些相关的参数。

1、使用Vite创建vue3项目

# npm

npm init [email protected] cesium-app -- --template vue

# yarn

yarn create vite cesium-app --template vue

# pnpm

pnpm create vite cesium-app -- --template vue

***注：设置项目名称为cesium-app

2、引入Cesium插件

# npm

npm install cesium vite-plugin-cesium vite -D

# yarn

yarn add cesium vite-plugin-cesium vite -D

# pnpm

pnpm install cesium vite-plugin-cesium vite -D

3、创建vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import cesium from 'vite-plugin-cesium'; export default defineConfig({ plugins: [vue(),cesium()] }); 4、页面中使用 Loading... import { reactive, onMounted } from "vue"; import * as Cesium from "cesium"; const props = defineProps({ viewStyle: {}, viewerProperty: {}, dropBackground: { default: false, }, }); onMounted(() => { const _this = this; const tianDiTuToken = "自己注册的天地图key"; // 服务负载子域 const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"]; // 创建图层 const viewer = new Cesium.Viewer("cesiumContainer", { animation: false, //是否创建动画小器件，左下角仪表 timeline: false, //是否显示时间轴 geocoder: false, //是否显示geocoder小器件，右上角查询按钮 baseLayerPicker: false, //是否显示图层选择器 fullscreenButton: false, //是否显示全屏按钮 homeButton: true, //是否显示Home按钮 infoBox: false, //是否显示信息框 sceneModePicker: false, //是否显示3D/2D选择器 scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源 selectionIndicator: false, //是否显示选取指示器组件 navigationHelpButton: false, //是否显示右上角的帮助按钮 baselLayerPicker: false, // 将图层选择的控件关掉，才能添加其他影像数据 shadows: true, //是否显示背影 imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ // 影像底图 url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tianDiTuToken}`, layer: "tdtBasicLayer", style: "default", format: "image/jpeg", subdomains: subdomains, tileMatrixSetID: "GoogleMapsCompatible", maximumLevel: 18, }), }); // 将图层挂载到window上 window.cesiumViewer = viewer; viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ //影像注记 url: `http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${tianDiTuToken}`, subdomains: subdomains, layer: "tdtCiaLayer", style: "default", format: "image/jpeg", tileMatrixSetID: "GoogleMapsCompatible", maximumLevel: 18, }) ); //优化项--关闭相关特效 viewer.scene.debugShowFramesPerSecond = false; //显示fps viewer.scene.moon.show = false; //月亮 viewer.scene.fog.enabled = false; //雾 viewer.scene.sun.show = false; //太阳 viewer.scene.skyBox.show = false; //天空盒 viewer.resolutionScale = 1.0; //画面细度，默认值为1.0 //去除版权信息 viewer._cesiumWidget._creditContainer.style.display = "none"; // 将三维球定位到中国 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000), orientation: { heading: Cesium.Math.toRadians(348.4202942851978), pitch: Cesium.Math.toRadians(-89.74026687972041), roll: Cesium.Math.toRadians(0), }, complete: function callback() { // 定位完成之后的回调函数 }, }); }); .fullSize, .full-container { position: absolute; /*top: 0;*/ /*left: 0;*/ border: none; height: 100%; width: 100%; margin: 0px; display: inherit; } .doubleViewer { width: 50%; } #loadingOverlay { position: absolute; top: 0; left: 0; opacity: 0.9; width: 100%; height: 100%; display: none; } #loadingOverlay h1 { text-align: center; position: relative; top: 50%; margin-top: -0.5em; } #mousePositionId { position: absolute; right: 30px; bottom: 50px; z-index: 100; font-size: 20px; } .layer-picker-class { float: right; } html { overflow-x: hidden; overflow-y: hidden; }

【本文地址】

公司简介

联系我们